<template>
  <div class="operation-log">
    <!-- 搜索栏 -->
    <div class="mb-4 flex items-center gap-4">
      <el-date-picker
        v-model="dateRange"
        type="daterange"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        class="w-80"
      />
      <el-input
        v-model="searchKey"
        placeholder="请输入用户名/操作描述"
        class="w-60"
        clearable
      >
        <template #prefix>
          <div class="i-carbon-search"></div>
        </template>
      </el-input>
      <el-button type="primary" @click="handleSearch">查询</el-button>
    </div>

    <!-- 日志列表 -->
    <div class="bg-white rounded-lg shadow-md">
      <ArtTable :data="logList" :loading="loading" border stripe>
        <el-table-column type="index" label="序号" width="80" align="center" />
        <el-table-column prop="user" label="用户名" min-width="100" />
        <el-table-column prop="requestIp" label="请求地址IP" min-width="120" />
        <el-table-column prop="requestUrl" label="请求URL" min-width="200" show-overflow-tooltip />
        <el-table-column prop="requestMethod" label="请求方式" min-width="100" align="center" />
        <el-table-column prop="abnormal" label="异常名称" min-width="120" />
        <el-table-column prop="operationTime" label="操作时间" min-width="160" align="center" sortable />
        <el-table-column prop="returnResult" label="返回结果" min-width="100" align="center">
          <template #default="scope">
            <el-tag :type="scope.row.returnResult === 'success' ? 'success' : 'danger'">
              {{ scope.row.returnResult }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="operationDesc" label="操作描述" min-width="150" />
      </ArtTable>

      <!-- 分页 -->
      <div class="mt-4 flex justify-end p-4">
        <el-pagination
          v-model:current-page="currentPage"
          v-model:page-size="pageSize"
          :total="total"
          :page-sizes="[10, 20, 50]"
          layout="total, sizes, prev, pager, next"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

// 搜索条件
const dateRange = ref([])
const searchKey = ref('')

// 列表数据
const loading = ref(false)
const currentPage = ref(1)
const pageSize = ref(10)
const total = ref(0)

// 模拟数据
const logList = ref([
  {
    user: 'admin',
    requestIp: '127.0.0.1',
    requestUrl: 'http://localhost:8077/scheduled/restart',
    requestMethod: 'POST',
    abnormal: '无',
    operationTime: '2023-06-12 16:07:29',
    returnResult: 'success',
    operationDesc: '重启服务'
  },
  {
    user: 'admin',
    requestIp: '127.0.0.1',
    requestUrl: 'http://localhost:8077/scheduled/start',
    requestMethod: 'POST',
    abnormal: '无',
    operationTime: '2023-06-12 16:07:25',
    returnResult: 'success',
    operationDesc: '启动服务'
  },
  {
    user: 'admin',
    requestIp: '127.0.0.1',
    requestUrl: 'http://localhost:8077/scheduled/stop',
    requestMethod: 'POST',
    abnormal: '无',
    operationTime: '2023-06-12 16:07:03',
    returnResult: 'success',
    operationDesc: '停止服务'
  }
])

// 搜索方法
const handleSearch = () => {
  loading.value = true
  setTimeout(() => {
    loading.value = false
  }, 500)
}

// 分页方法
const handleSizeChange = (val: number) => {
  pageSize.value = val
  // TODO: 重新加载数据
}

const handleCurrentChange = (val: number) => {
  currentPage.value = val
  // TODO: 重新加载数据
}
</script>

<style scoped>
.operation-log {
  .el-button-group {
    .el-button {
      margin-left: 0 !important;
    }
  }
}
</style> 